<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<style>
			.a{
				background-color: skyblue;
				padding: 10px;
			}
			.demo{
				background-color: orange;
				padding: 10px;
			}
		</style>
		<title>getSnapshotBeforeUpdate</title>
		<!-- 引入react核心库 -->
		<script type="text/javascript" src="../js/react.js"></script>
		<!-- 引入react-dom，用于支持react操作DOM -->
		<script type="text/javascript" src="../js/react-dom.js"></script>
		<!-- 引入babel，用于解析jsx为js -->
		<script type="text/javascript" src="../js/babel.min.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器 -->
		<div id="root"></div>

		<script type="text/babel">
			//定义组件
			class Demo extends React.Component{
				state = {sum:0}
				render(){
					console.log('---render---')
					return (
						<div className="demo">
							<h2>当前求和为：{this.state.sum},学校：{this.props.school}</h2>	
							<button onClick={this.add}>+1</button>
						</div>
					)
				}
				getSnapshotBeforeUpdate(preProps,preState){
					console.log('---getSnapshotBeforeUpdate---',preProps,preState)
					return 6666
				}
				componentDidUpdate(preProps,preState,snapValue){
					console.log('---componentDidUpdate---',preProps,preState,snapValue)
				}
				add = ()=>{
					const {sum} = this.state
					this.setState({sum:sum+1})
				}
			}
			//渲染组件
			
			class A extends React.Component{
				state = {school:'尚硅谷'}
				render(){
					return (
						<div className="a">
							<h2>我是A组件，学校：{this.state.school}</h2>	
							<button onClick={this.changeSchool}>更换学校名</button>
							<Demo school={this.state.school}/>
						</div>
					)
				}
				changeSchool = ()=>{
					this.setState({school:'atguigu'})
				}
			}
			
			ReactDOM.render(<Demo/>,document.getElementById('root'))
		</script>
	</body>
</html>